<template>
    <el-card class="card" shadow="always">
        <el-row>
            <el-col :span="15">
                <el-space direction="horizontal" fill wrap style="width: 100%">
                    <div class="demo-progress">
                        <el-progress type="dashboard" :width="100" :percentage="percentage" :color="colors" >
                            <template #default="{ percentage }">
                                <span class="percentage-value">{{ percentage }}%</span>
                            </template>
                        </el-progress>
                    </div>
                </el-space>
            </el-col>
            <el-col :span="9">
                <el-space direction="vertical" fill wrap size="large" style="margin-top: 15%;">
                    <el-text type="warning">本周目标:10</el-text>
                    <el-text type="success">距离目标:10</el-text>
                </el-space>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="8">
                <el-card class="a-card" shadow="hover">
                   <img src="../../../../public/img/消息.png">
                   <span>消息</span>
                 </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="a-card" shadow="hover"> 
                     <img src="../../../../public/img/收藏夹.png"> 
                     <span>收藏夹</span>
                </el-card></el-col>
            <el-col :span="8">
                <el-card class="a-card" shadow="hover">  
                    <img src="../../../../public/img/笔记本.png"> 
                    <span>笔记本</span>
                </el-card></el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="8">
                <el-card class="a-card" shadow="hover"> 
                    <img src="../../../../public/img/错题本.png"> 
                    <span>错题本</span>
                </el-card></el-col>
            <el-col :span="8">
                <el-card class="a-card" shadow="hover"> Hover </el-card></el-col>
            <el-col :span="8">
                <el-card class="a-card" shadow="hover"> Hover </el-card></el-col>
        </el-row>

    </el-card>
  
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const percentage = ref(10)


const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

onMounted(() => {
  setInterval(() => {
    percentage.value = (percentage.value % 100) + 10
  }, 500)
})

</script>

<style scoped>
    .card{
        height: 100%;
        border: 0;
        border-radius: 8%;
       
    }
    
    .el-card{
        border: 0;
        border-radius: 12%;
       
    }
    .a-card{
        width: 67px;
        height: 67px;
        display: flex;
        background-color: var(--el-card);
        text-align: center;
        justify-content: center;
        flex-direction: column;
        font-size: 8px;
    }
    .a-card span{
        margin-top: 3px;
    }
    

</style>